$rowHeight: 43px;

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: none !important;
  border-top: 1px solid var(--euiColorPrimary);
  padding: 12px 20px;
  max-height: 234px;
  scroll-padding-bottom: 30px;
}

.container {
  display: flex;
  flex-direction: column;

  &.compressed {
    flex-direction: row;

    .entryIdContainer {
      width: 190px;

      :global(.euiFormControlLayout--group) {
        border-right: 0;
      }
    }

    .fieldsWrapper {
      width: auto;
    }

    .valueItemWrapper {
      flex-grow: 1.5;
    }
  }

  .entryIdContainer {
    width: 50%;
    flex-shrink: 0;

    .timestampText {
      display: inline-block;
      color: var(--euiColorMediumShade);
      font:
        normal normal normal 12px/18px Graphik,
        sans-serif;
      margin-top: 6px;
      padding-right: 6px;
    }
  }

  .fieldsWrapper {
    flex-grow: 1;
    flex-shrink: 0;
    width: 100%;
    margin-top: 12px;
  }

  //.fieldsContainer {
  //  @include eui.scrollBar;
  //  max-height: calc(4*#{$rowHeight});
  //  overflow-x: hidden;
  //}
}

.entryIdTooltip {
  max-width: 275px !important;
}

.deleteBtn {
  position: absolute;
  display: none;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.row {
  position: relative;
  margin-top: 8px;
  margin-bottom: 16px;

  &.compressed {
    margin-bottom: 0;
  }

  &:hover {
    .deleteBtn {
      display: block;
    }

    .fieldValue {
      padding-right: 40px;
    }
  }
}

.addRowBtn {
  margin-top: 12px;
}

.error {
  display: inline-block;
  color: var(--euiColorDangerText);
  font:
    normal normal normal 12px/18px Graphik,
    sans-serif;
  margin-top: 6px;
  padding-right: 6px;
}
